<template>
  <d2-container>
    <div>
      <div class="block" style=" border-radius:5px;">
        <section>
          <div style="width:100%;height:72px;background:white;">
          <span style="height:72px;line-height:72px;padding-left:20px;background:white;">商家邀请链接：
            <a style="color:blue;text-decoration:underline;cursor: pointer;" target="_blank"
               rel="noopener noreferrer">{{'http://kww.zsfqlm.com/#/login?k='+ keynum}}</a>
          </span>
          <el-button type="success" v-copy="'http://kww.zsfqlm.com/#/login?k='+ keynum" size="mini" style="margin-left:20px;">复制</el-button>
          </div>
          <div style="width:100%;margin:-10px auto;height:135px;background:rgba(242,242,242,1);border-radius:6px;">
            <p style="width:100%;color:#666666;padding-top:19px;box-sizing:border-box;margin-left:20px;">邀请奖励：</p>
            <p style="width:100%;color:#666666;margin-top:17px;box-sizing:border-box;margin-left:20px;">
              1.每邀请一位商家成功发布任务，您可得商家支付佣金的5%作为额外奖励；</p>
            <!-- <p style="width:100%;color:#666666;margin-top:12px;box-sizing:border-box;margin-left:20px;">2.每邀请一位商家首次成功发布任务，您可获得1000个萌点；注：任何用户不得利用此活动，自己邀请自己获得返利；一旦平台查出此种情况，违规获得的邀请返利将不予提现。
            </p> -->
            <p
              style="width:100%;color:#666666;margin-top:12px;box-sizing:border-box;margin-left:20px;margin-bottom:20px;">
              注：任何用户不得利用此活动，自己邀请自己获得返利；一旦平台查出此种情况，违规获得的邀请返利将不予提现。</p>
          </div>
        </section>
        <div class="statistical">
          <div :style="{background:bgcolor[index]}" class="son" v-for="(item,index) in statisticallist"
               :key="item.name">
            <p class="sonprice">￥{{item.price}}</p>
            <p class="sonname">{{item.name}}</p>
          </div>
        </div>

        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="user"
            label="用户名">
          </el-table-column>
          <el-table-column
            prop="consumption_money"
            label="消费金额">
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量">
          </el-table-column>
          <el-table-column
            prop="commission_money"
            label="提成金额">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </d2-container>
</template>

<script>
  import {agenlist, userinfo} from '@/api/api'
  import {agentlist,ageninfo} from '@/api/api'
  export default {
    name: "Admin_Mercahant",
    data() {
      return {
        tableData: {
          admininfo: [],
        },
        ids:[],
        dialogVisible:false,
        keynum: '',
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        searchList: {
          search: "user",
          searchValue: "",
          filter: {
            user: "",
            taskStatus: ""
          },
          pn: 1,
          total: 0
        },
        MoneyCount: {},
        page:1,
        statisticallist: [
          {price: '0.00', name: '邀请商家提成余额', num: 0},
          {price: '0.00', name: '邀请商家提成', num: 0},
          {price: '0.00', name: '邀请商家消费', num: 0},
          {price: '0.00', name: '邀请商家刷单总数', num: 0}
        ],
        bgcolor: ['#e4cc60', '#0494ae', '#f88109', '#f83215'],
      };
    },
    created() {
      this.getUser()
      this.getAgent()
      this.agenlists()
    },
    methods: {
      agenlists() {
        let params = {
          page: this.page,
          pagesize: 10
        }
        agenlist(params).then((res) => {
          if(res.Status == 200){
            this.tableData = Object.entries(res.Data).map((item)=>{
              item.splice(0,1)
              return item
            }).flat(1)
            this.MoneyCount = res.MoneyCount
            this.statisticallist[0].price =this.MoneyCount.money_count-this.MoneyCount.money_consumption
            this.statisticallist[1].price = this.MoneyCount.money_count;
            this.statisticallist[2].price =this.MoneyCount.consumption_count;
            this.statisticallist[3].price = this.MoneyCount.task_count;
            this.total = res.Data.task_count
          }else{
            this.$message({
              type:'error',
              message:res.Message
            })
          }
        })
      },
      //获取用户信息
      getUser() {
        userinfo().then(res => {
          if (res.Status == 200) {
            this.keynum = res.Data.userkey
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      getAgent() {
        let _this = this;
        var searchListParams = {
          Pagesize: 20,
          Page: _this.searchList.pn,
        }
        agentlist(searchListParams).then(res => {
          if (res.Status == 200) {
            // this.statisticallist[0].price = res.Data.balance;
            // this.statisticallist[1].price = res.Data.commission;
            // this.statisticallist[2].price = res.Data.consumption;
            // this.statisticallist[3].price = res.Data.task_count;
          } else {
            console.log(res);
          }
        })
      }
    },
  };
</script>

<style lang="scss">
  section {
    background: white;
    border-radius: 5px;
    margin-bottom: 30px;
    //height:140px;
    .sec {
      width: 1280px;
      height: 241px;
      margin-left: 110px;
      margin-top: 40px;
    }
  }

  .statistical {
    display: flex;
    justify-content: space-around;

    .son {
      margin: 10px;
      width: 100%;
      padding: 10px 20px;
      border-radius: 6px;
      color: #fff;

      .sonprice {
        font-size: 20px;
        margin: 10px 0;
      }

      .sonname {
        margin-top: 0;
      }
    }
  }
</style>
